<template>
  <div
    id="titles"
    :style="{
      borderRadius:styles.circle+'px',
      marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',
        marginLeft:styles.marginLR+'px',
         marginRight:styles.marginLR+'px',}"
  >
    <div
      class="content"
      :style="{justifyContent:styles.wordStatus,backgroundColor:styles.colorBg,}"
    >
      <el-image
        v-if="!styles.upLoad1.img==''"
        class="icons"
        style="width: 25px; height: 25px"
        :src="styles.upLoad1.img"
        fit="cover"
      ></el-image>
      <span :style="{color:styles.upLoad1.colorWord}">{{styles.upLoad1.text}}</span>
    </div>
    <div class="right">
      <span :style="{color:styles.upLoad2.colorWord}">{{styles.upLoad2.text}}</span>
      <el-image
        v-if="!styles.upLoad2.img==''"
        class="icons-right"
        style="width: 25px; height: 25px"
        :src="styles.upLoad2.img"
        fit="cover"
      ></el-image>
    </div>
  </div>
</template>

<script>
export default {
  name: "titles",
  data() {
    return {
      img: require("../../../assets/img/notice4.png"),
      img2: require("../../../assets/img/right.png"),
    };
  },
  props: ["styles"],
};
</script>

<style lang='less' scoped>
#titles {
  position: relative;
  overflow: hidden;
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    height: 40px;
    padding: 0 10px;
    > .icons {
      margin-right: 5px;
    }
    > span {
      font-weight: bold;
      font-size: 18px;
    }
  }
  .right {
    position: absolute;
    right: 10px;
    top: 8px;
    display: flex;
    justify-self: start;
    align-items: center;
    > span {
      color: #969696;
      font-size: 10px;
    }
    > .icons-right {
      margin-left: 5px;
    }
  }
}
</style>
